<template>
  <el-card>
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/stuWelcome' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>警告通知</el-breadcrumb-item>
      <el-breadcrumb-item>警告信息</el-breadcrumb-item>
    </el-breadcrumb>
    <!--表单模块-->
    <el-table :data="warnings" highlight-current-row
              ref='table' border stripe height="300" style="margin-top: 20px;">
      <el-table-column type="index"  align="center" width="80"></el-table-column>
      <el-table-column  label="信息通知"  align="center">
        <template slot-scope="scope">
          <el-tag
            type="warning"
            effect="dark"
          >{{ stuName + '同学， '+ ' 你第' + scope.row.week + '周在' + scope.row.couName + '课程上有所懈怠，请打起精神，专注于学习！'}}
          </el-tag>
        </template>
      </el-table-column>
      <el-table-column prop="publisher" label="发布者" align="center" width="120"></el-table-column>
      <el-table-column label="操作" fixed="right" align="center" width="120">
        <template slot-scope="scope">
          <!-- 修改 -->
          <el-tag
            type="primary"
            effect="dark"
            @click="information(scope.row)"
          >查看
          </el-tag>
        </template>
      </el-table-column>

    </el-table>
    <!--分页插件-->
    <el-pagination
      background
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="curpage"
      :page-sizes="[2, 4, 8, 10]"
      :page-size="pagesize"
      layout="total, sizes, prev, pager, next"
      :total="total">
    </el-pagination>
  </el-card>
</template>

<script>
  import axios from 'axios';//axios
  import Qs from 'qs';//qs
  export default {
    name:"warningList",
    //绑定数据
    data() {
      return {
        warnings:[],//注意使用表格时，pop属性对应的内容等价于后端数据传输的字段(键)
        curpage:1,//当前页
        pagesize:4,//每页显示条数
        total:0,//总条数
        searchName:"",
        searchWeek:"",
        stuName:"",
      }
    },
    //文档加载事件,当没有任何按钮去点击触发事件时，可以使用该函数在加载时，触发事件！
    mounted() {
      this.warningList();
      this.stuName = localStorage.getItem("stuName");
      console.log(this.stuName);
      this.information();
    },
    methods:{
      information(data){
        // console.log(data)
        this.$notify({
          title: '警告',
          message: this.stuName + '同学， '+ ' 你第' + data.week + '周在' + data.couName + '课程上有所懈怠，请打起精神，专注于学习！',
          type: 'warning',
          duration: 3000
        });
      },
      selectRow(row) { // 给操作行 高亮
        if (row) {
          this.$refs.table.setCurrentRow(row, true);  // 高亮某一行
        } else {
          this.$refs.table.setCurrentRow();  // 取消高亮
        }
      },
      // 监听 pageSize 改变的事件
      handleSizeChange (newSize) {
        //   console.log(newSize)
        //  将监听接受到的每页显示多少条的数据 newSzie 赋值给 pagesize
        this.pagesize = newSize;
        //  修改完以后，重新发起请求获取一次数据
        this.warningList();
      },
      // 监听 页码值  改变的事件
      handleCurrentChange (newPage) {
        //   console.log(newPage)
        //  将监听接受到的页码值的数据 newPage 赋值给 pagenum
        this.curpage = newPage;
        //  修改完以后，重新发起请求获取一次数据
        this.warningList();
      },
      //执行分页查询的函数
      warningList(curpage = 1) {
        let stuNum = localStorage.getItem("stuNum");
        var motives=this;
        axios.get(
          "http://localhost:1313/warning/queryWarningByStuNumPage",
          {params:{current:motives.curpage, rows: motives.pagesize,search:stuNum}}
        ).then((res)=>{
          console.log(res)
          //将返回数据赋值给绑定数据，完成数据渲染
          this.warnings = res.data.data.warnings;
          this.total = res.data.data.total;
        });
      },
    }
  }

</script>

<style>
  /* 用来设置当前页面element全局table 选中某行时的背景色*/
  .el-table__body tr.current-row>td{
    background-color: rgba(227, 189, 241, 0.76) !important;
    color: #fff;
  }
  .el-input--suffix .el-input__inner {
    padding-right: 15px;
  }
  .form{
    display: grid;
    justify-content: center;
    /* align-items: center; */
    justify-items: center;
  }
  .el-button--info.is-plain {
    color: #704141;
    background: #f4f4f5;
    border-color: #d3d4d6;
  }
  .el-button--mini {
    font-size: 14px;
    border-radius: 3px;
  }
  .el-breadcrumb{
    padding-bottom: 20px;
  }
  .el-pagination{
    padding-top: 20px;
  }
</style>
